<template>
	<view class="articleitem">
		<view class="articleitem_content">
			<!-- title -->
			<view class="articleitem_content_title">
				{{contentData.des}}
			</view>
			<!-- tags -->
			<view class="articleitem_content_tags">
				<view class="articleitem_content_tags_item" v-for="item in contentData.tags">
					{{item}}
				</view>
			</view>
			<!-- date, count -->
			<view class="articleitem_content_date">
				<text>{{contentData.date}}</text>
				<text>{{contentData.count}}人阅读</text>
			</view>
			
			<!-- content -->
			<view class="articleitem_content_main">
				<text>{{contentData.des}}</text>
			</view>
			
			<!-- comments -->
			<view class="articleitem_content_comments"></view>
			<!-- <view class="articleitem_content_nav">
				<view class=".articleitem_content_nav_left">
					<view class="articleitem_content_nav_left_goods">
						 <uni-icons slot="heart" color="#000000" size="26" type="heart" class="heart"/>
						 <view class="heart_text">
						 	1.3k
						 </view>
					</view>
					<view class="articleitem_content_nav_left_stars">
						<uni-icons slot="star" color="#000000" size="26" type="star" class="star"/>
						<view class="star_text">
							149230
						</view>
					</view>
				</view>
				<view class="articleitem_content_nav_input">
					111
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentData: {},
			}
		},
		methods: {
			
		},
		onLoad(params) {
			this.contentData = JSON.parse(params.params)
		}
	}
</script>

<style>

.articleitem {
	width: 100%;
	background-color: #F7F7F7;
	position: relative;
}

.articleitem_content {
	background-color: #FFFFFF;
	padding: 30rpx 30rpx;
}
.articleitem_content_title {
	color: #000000;
	font-size: 20px;
	font-weight: 700;
}
.articleitem_content_tags {
	margin-top: 30rpx;
	display: flex;
	flex-wrap: nowrap;
}

.articleitem_content_tags_item {
	box-sizing: border-box;
	height: 100%;
	padding: 4rpx;
	font-size: 14px;
	line-height: 100%;
	border: 2rpx solid #F15F35;
	border-radius: 4px;
	margin-right: 20rpx;
	color: #F15F35;
	white-space: nowrap;
}

.articleitem_content_date {
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	color: #8f9199;
	font-size: 12px;
}

.articleitem_content_main {
	margin-top: 30rpx;
}

.articleitem_content_nav {
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	padding: 0 50rpx;
}

.articleitem_content_nav_left {
	width: 40%;
	height: 100%;
	line-height: 100%;
	display: flex;
	justify-content: space-between;
}

.articleitem_content_nav_left_goods {
	height: 100%;
	line-height: 100%;
	position: relative;
}

.articleitem_content_nav_left_goods > .heart {
	display: inline-block;
	position: absolute;
	top: 20rpx;
}

.articleitem_content_nav_left_goods > .heart_text {
	display: inline-block;
	position: absolute;
	top: 20rpx;
	left: 60rpx;
}

.articleitem_content_nav_left_stars {
	height: 100%;
	line-height: 100%;
	position: relative;
}

.articleitem_content_nav_left_stars > .star {
	display: inline-block;
	position: absolute;
	top: 20rpx;
}

.articleitem_content_nav_left_stars > .star_text {
	display: inline-block;
	position: absolute;
	top: 20rpx;
	left: 60rpx;
}

.articleitem_content_nav_input {
	width: 60%;
}

.articleitem_content_comments {
	
}
</style>
